<template>
  <a-card>
    <!-- 销售统计 -->
    <div class="home">
      <div class="searchNav" style="display: flex; justify-content:space-between;">
        <!-- <a-button
        class="button"
        icon="el-icon-document"
        type="primary"
        style="margin-left: 0"
        :loading="addloading"
        @click="downloadFile"
        >销售统计销售统计销售统计销售统计销售统计</a-button
      > -->
        <div class="searchNav">
          <div class="searchParams" style="justify-content: flex-start; margin-bottom: 10px;">
            <el-date-picker v-model="daterange" type="daterange" style="width: 250px; margin-left: 10px" size="small"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeTime">
            </el-date-picker>
            <el-select class="input1" v-model="optionsKey" size="small" placeholder="请选择搜索类型" @change="selectChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <a-input style="margin-left: 10px" class="input1" v-model="queryParam.Keywords"
              :placeholder="'请输入' + placeholder + '名称进行查询'" @keydown.enter.native="Getdata"></a-input>
            <a-button class="button" @click="Getdata" type="primary">查询</a-button>
          </div>
        </div>
        <div class="searchParams" style="display: flex;padding-bottom: 10px;">
          <div>
            <radioGroup @radioChange="radioChange" @complete="radioComplete" />
          </div>
        </div>
      </div>

      <el-table ref="multipleTable" :data="tableData" style="width: 100%" :max-height="height" v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column prop="Name" :label="label" width="380">
        </el-table-column>
        <el-table-column prop="" label="销售金额" width="800">
          <el-table-column v-if="selectOptions == 1" prop="TotalNum" label="数量" width="400">
          </el-table-column>
          <el-table-column prop="ReceiveSum" label="现结" width="400">
          </el-table-column>
          <el-table-column prop="PendingSum" label="挂账" width="420">
          </el-table-column>
          <el-table-column prop="TotalSum" label="合计" width="420">
          </el-table-column>
        </el-table-column>
      </el-table>
      <div style="display: flex">
        <el-pagination layout="total,prev, pager, next,sizes" :total="pagination.total" :current-page="pagination.current"
          :page-size="pagination.pageSize" :page-sizes="pagination.pageSizeOptions"
          style="margin-top: 8px; padding: 0; flex: 5" @current-change="currentChange" @size-change="handleSizeChange">
        </el-pagination>
        <el-row :gutter="20"
          style=" text-align: right; font-weight: bold;padding:10px 0;flex:6;display:flex;justify-content: flex-end;padding-right:20px">
          <el-col v-if="selectOptions == 1" :span="5">
            <div style="">总数量: {{ totalNum }}</div>
          </el-col>
          <el-col :span="5">
            <div style="">总现结: {{ toThousands(totalReceiveSum) }}</div>
          </el-col>
          <el-col :span="5">
            <div style="">总挂账: {{ toThousands(totalPendingSum) }}</div>
          </el-col>
          <el-col :span="5">
            <div style="">总合计: {{ toThousands(totalSum) }}</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </a-card>
</template>

<script>
import axios from "axios";
import radioGroup from "@/components/components/CompanyRadioGroup.vue";
import { toThousands } from "@/utils/Tools";
import MyBreadcrumb from '@/components/components/myBreadcrumb.vue';
export default {
  name: "Home",
  components: {
    radioGroup,
    MyBreadcrumb,
    // waybillForm
  },
  data() {
    return {
      // 选择的是客户 货品 还是业务员
      selectOptions: 0,
      // 显示客户  还是人员
      label: '客户',
      // 日期
      daterange: [],
      // 默认下拉选项的值
      optionsKey: '客户',
      placeholder: "请输入客户名称进行查询",
      // 金额格式化工具
      toThousands,
      // 搜索类型下拉数据
      options: [{
        value: '0',
        label: '客户'
      },
      {
        value: '1',
        label: '货品'
      },
      {
        value: '2',
        label: '业务员'
      }],
      activeName: "first",
      pagination: {
        current: 1,
        pageSize: 25,
        total: 0,
        pageSizeOptions: [25, 50, 100],
      },
      sorter: {
        field: "Id",
        order: "desc",
      },
      // 销售统计列表数据
      tableData: [],
      // 查询列表参数
      queryParam: {
        CompanyId: "",
        StartTime: "",
        EndTime: "",
        Keywords: "",
        Type: 0
      },
      loading: false,
      // 挂账总金额
      totalPendingSum: 0,
      // 现结总金额
      totalReceiveSum: 0,
      // 总合计金额
      totalSum: 0,
      // 货品总数量  在选择货品下拉时显示
      totalNum: 0
    };
  },
  mounted() { },
  computed: {
    height() {
      return document.documentElement.clientHeight * 0.75;
    },
  },
  methods: {
    // 搜索下拉改变
    selectChange(e) {
      console.log('选择的是', e);
      this.selectOptions = e
      this.queryParam.Type = e
      if (e == 0) {
        this.optionsKey = '客户';
        this.label = '客户'
        this.placeholder = '客户'
      } else if (e == 1) {
        this.optionsKey = '货品';
        this.label = '货品'
        this.placeholder = '货品'
      } else {
        this.optionsKey = '业务员';
        this.label = '业务员'
        this.placeholder = '业务员'
      }
      this.pagination.current = 1
      this.getDataList()
      this.getGetLinqBillingStatistics()
    },
    // 时间选择
    changeTime(e) {
      console.log(e);
      if (e) {
        this.queryParam.StartDate = e[0];
        this.queryParam.EndDate = e[1];
      } else {
        this.queryParam.StartDate = ''
        this.queryParam.EndDate = ''
      }

      // 清空列表数据
      this.pagination.current = 1
      // 获取销售统计列表数据
      this.getDataList()
      this.getGetLinqBillingStatistics()
    },
    // 多选
    handleSelectionChange(rows) {
      this.selectRows = rows.map((item) => item.evidenceId);
    },
    radioComplete(e) {
      console.log(e);
      if (e) {
        this.queryParam.CompanyId = e;
        // 获取销售统计列表数据
        this.getDataList();
        // 获取销售总金额统计数据
        this.getGetLinqBillingStatistics();
      }
    },
    // 公司切换
    radioChange(e) {
      if (e == "more") return;
      this.queryParam.CompanyId = e;
      this.getDataList();
      this.getGetLinqBillingStatistics();
    },
    currentChange(page) {
      this.pagination.current = page;
      this.getDataList();
    },
    handleSizeChange(lint) {
      this.pagination.pageSize = lint;
      this.getDataList();
    },
    Getdata() {
      this.loading = true
      this.pagination.current = 1
      this.tableData = []
      this.getDataList();
      // this.getGetLinqBillingStatistics()
    },

    // 获取销售金额总计数据
    getGetLinqBillingStatistics() {
      this.$httpp.post("/BO/BIlling/GetLinqBillingAllStatistics", {
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        Search: this.queryParam
      }).then((resJson) => {
        if (resJson.Success) {
          console.log('获取销售金额金额金额额金额金额统计数据额金额金额统计数据额金额金额统计数据统计数据', resJson.Data)
          if (resJson.Data == null) {
            this.totalPendingSum = 0
            this.totalReceiveSum = 0
            this.totalSum = 0
            this.totalNum = 0
            return
          }
          this.loading = false
          //  总挂账金额赋值
          this.totalPendingSum = resJson.Data.PendingSum
          //  总现收金额赋值
          this.totalReceiveSum = resJson.Data.ReceiveSum
          //  总合计金额赋值
          this.totalSum = resJson.Data.AmountTo
          //  总商品数量赋值
          this.totalNum = resJson.Data.TotalNum

        } else {
          this.loading = false
        }
      });
    },

    // 获取销售统计列表数据
    getDataList() {
      this.loading = true;


      this.$httpp
        .post("BO/BIlling/GetLinqBillingStatistics", {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          Search: this.queryParam,
        })
        .then((resJson) => {
          this.loading = false;
          if (resJson.Success) {
            this.tableData = resJson.Data;
            if (this.tableData) {
              const pagination = { ...this.pagination };
              pagination.total = resJson.Total;
              this.pagination = pagination;
            }
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-tabs__nav {
  width: 100%;
  background: #fff;
}

/deep/ .el-tab-pane {
  width: 100%;
  background: #fff;
}

/deep/ .el-tabs__item {
  width: 16.6%;
  text-align: center;
  font-weight: bold;
  padding: 0;
}

/deep/ .el-tabs__item:hover {
  background: #ecf5ff;
}

.input1 {
  width: 200px;
  margin-left: 10px;
}

.button {
  background-color: #1890ff;
  border: #1890ff;
}

.button:hover {
  background-color: #1890ff;
}
</style>
